<script setup>
	import {ElContainer,ElAside,ElMain,ElButton,ElForm,ElFormItem,ElInput} from 'element-plus'
	import {User,Lock} from '@element-plus/icons-vue'
	import { useRouter,useRoute } from 'vue-router';
	import {reactive,ref} from "vue"
	import {Login} from "../api"
	let router=useRouter()
		let route=useRoute()
	let ruleForm = reactive({
		adminAccount:"",
		adminPassword:""
	})
	let myForm = ref(null)
	const checkUsername=(rule,value,callback)=>{
		let reg=/^\w{3,}$/
		if(value==""){
			callback(new Error("用户名不能为空"))
		}else if(!reg.test(value)){
			callback(new Error("用户名只能是数字，字母，下划线"))
		}else{
			callback()
		}
	}
	const checkPwd=(rule,value,callback)=>{
		if(value==""){
			callback(new Error("密码不能为空"))
		}else{
			callback()
		}
	}
	let rules=reactive({
		adminAccount:[
			{
				validator:checkUsername,
				trigger:"blur"
			}
		],
		adminPassword:[
			{required: true, message: '密码不能为空', trigger: "blur" }
		]
	})
	import axios from 'axios';
	const login=(formEl)=>{
		formEl.validate(async (valid)=>{
			if(valid){
				let res=await Login(ruleForm)
				if(res){
					sessionStorage.setItem("token",res.authorization)
					sessionStorage.setItem("roleId",res.user.roleId)
					sessionStorage.setItem("siteId",res.user.siteId)
					sessionStorage.setItem("roleName",res.user.roleName)
					// console.log(res);
					router.push("/")
				}
			}
		})	
	}
</script>

<template>
	<div class="common-layout">
		<el-container class="container">
			<el-aside width="30%">
				<h1>欢迎使用站点后台演示系统</h1>
				<p>MIT开源协议.所想所得.高效创作.开放的插件生态</p>
				
			</el-aside>
			<el-main>
				<div class="box">
					<h4>站点登录</h4>
					<el-form :model="ruleForm" :rules="rules" ref="myForm">
						<el-form-item prop="adminAccount">
							<el-input type="text" :prefix-icon="User" placeholder="请输入账号" v-model="ruleForm.adminAccount"></el-input>
						</el-form-item>
						<el-form-item prop="adminPassword">
							<el-input type="password" :prefix-icon="Lock" placeholder="请输入密码" v-model="ruleForm.adminPassword"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="login(myForm)">登录</el-button>
						</el-form-item>
					</el-form>
				</div>
			</el-main>
		</el-container>
	</div>
</template>



<style scoped lang="less">
	.container{
		width:100%;
		height:100%;
	}
	.el-aside{
		height: 100vh;
		background-image: url(/登录-切图.jpg);
		background-size: 100% 100%;
		h1{
			text-align: center;
			margin-top: 100px;
		}
		p{
			text-align: center;
			margin-top: 20px;
		}
	}
	.el-main{
		height: 100vh;
		background: #f9faff;
		display: flex;
		align-items: center;
		justify-content: center;
		.box{
			width:300px;
			height: 300px;
			background: #fff;
			h4{
				margin: 30px;
			}
			.el-form{
				width:260px;
				margin: 0 auto;
				.el-button{
					width: 260px;
				}
			}
		}
	}
	
</style>
